<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/w3.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bulma.min.css') }}" />


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  </head>

  <body>
    <div class="w3-top" style="position:relative;">
      <div class="w3-bar w3-black w3-wide w3-padding w3-card" style="font-size:15px;font-family:Verdana, sans-serif;margin:0">
        <a href="/" class="w3-bar-item w3-button" style="font-size:18px;text-decoration:none;font-family:Verdana, sans-serif;"><b>Food</b> Detector</a>  
        <a href="/url" class="w3-bar-item w3-button" style="font-size:18px;float:right;text-decoration:none;font-family:Verdana, sans-serif;">Detect by url</a>       
        <a href="/webcam" class="w3-bar-item w3-button" style="font-size:18px;float:right;text-decoration:none;font-family:Verdana, sans-serif;">Detect by webcam</a>       
      </div>
    </div>


    <div class='center' style="position:relative;">
      <div class="panel panel-default result-panel">
        <div class="panel-body w3-card">
          <div class="container">
            <div class="row justify-content-center">
              <h2>Detection inputs</h2>
            </div>
          </div>
          <div class='content'>
            <form id="file-upload" action = "{{ url_for('analyze') }}" method = "POST" enctype="multipart/form-data">
              <div class="row">
                <div class="col-md-3">
                  <div id="canvas-tools" class="panel panel-default">
                    <div class="panel-body">
                      <div id="threshold-text">
                        <b>IOU Threshold:</b>
                        <span>50</span>%
                      </div>
                      <input id="threshold-range" type="range" min="0" max="100" value="50" class="slider" name="threshold-range">
                    </div>
                  </div>
                </div>

                <div class="col-md-3">
                  <div id="canvas-tools" class="panel panel-default">
                    <div class="panel-body">
                      <div id="confidence-text">
                        <b>Confidence:</b>
                        <span>15</span>%
                      </div>
                      <input id="confidence-range" type="range" min="0" max="100" value="15" class="slider" name="confidence-range">
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label for="model-types">Choose a model</label>
                    <br/>
                    <select name="model-types" class="form-control-sm" id="model-types">
                      <option>YOLOv8s</option>
                      <option>YOLOv5s</option>
                      <option>YOLOv5m</option>
                      <option>YOLOv5l</option>
                      <option>YOLOv5x</option>
                    </select>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="ensemble" name="ensemble">
                    <label class="form-check-label" for="ensemble">Ensemble models</label>
                  </div>

                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="tta" name="tta">
                    <label class="form-check-label" for="tta">Test-time augmentation</label>
                  </div>

                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="enhanced" name="enhanced">
                    <label class="form-check-label" for="enhanced">Label Enhancement</label>
                  </div>

                  
                </div>
                
                <br/>

                <div class="container">
                  <div class="row justify-content-md-center">
                    <div class="col-md-3">
                      <h1>Segmentation inputs</h1>
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="seg" name="seg">
                        <label class="form-check-label" for="seg">Semantic Segmentation</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <br/>

              <div class='no-display'>
                <input id='file-input'
                      class='no-display'
                      type='file'
                      name='file'
                      onchange='showPicked(this)'>
              </div>

              <button class='btn btn-primary' type='button' onclick='showPicker()'>Upload File</button>


              <div class='upload-label'>
                <label id='upload-label'></label>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="panel panel-default result-panel">
                    <div class="panel-body result-card">
                      <div id='image-display'></div>
                      <div id="webcam-video"></div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class='analyze'>
                <button id='analyze-button' class='btn btn-outline-success' name='upload-button' type='submit' disabled="disabled">Detect</button>
              </div>

            </form>
          </div>
        </div>
      </div>
    </div>


    <footer style="position: absolute;right: 0;left: 0;padding: 1rem;text-align: center; box-sizing: border-box;z-index:150;" class="w3-card w3-container w3-padding-64 panel-body panel panel-default result-panel w3-light-gray w3-center w3-xlarge">
    
      <a href="https://github.com/lannguyen0910/food-detection-yolov5" target="_blank"><i class="fab fa-github w3-hover-opacity"></i></a>
      <p class="w3-medium" style="font-weight: bold;">Created by <a href="https://github.com/kaylode/"
          target="_blank" style="text-decoration: none;">kaylode</a> and <a href="https://github.com/lannguyen0910/"
          target="_blank" style="text-decoration: none;">lannguyen</a></p>

    </footer>

    <script src="{{ url_for('static', filename='js/handle-upload-file.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/all.js') }}" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>